<template>
	<view class="generate-power">
		<view class="top-item">
			<view class="left">
				<view class="charts-box">
					<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" />
				</view>
			</view>
			<view class="right">
				<view class="first">
					<view>发电功率</view>
					<view>
						<text
							class="integer">{{ allActivePower == '' ? '--' : (allActivePower/1000).toFixed(2) }}</text>
						<text class="unit">KWh</text>
					</view>
				</view>
				<view class="second">
					<view>装机容量</view>
					<view>
						<text class="integer">{{ capacity || "--" }}</text>
						<text class="unit">KWh</text>
					</view>
				</view>
			</view>
		</view>
		<view class="top-item bottom-item">
			<view class="left">
				<view class="first">
					<view class="title">当日发电量</view>
					<view>
						<text class="integer">{{ dayPower || "--" }}</text>
						<text class="unit">KWh</text>
					</view>
				</view>
				<view class="second">
					<view class="title">当年发电量</view>
					<view>
						<text class="integer">{{ yearPower || "--" }}</text>
						<text class="unit">KWh</text>
					</view>
				</view>
			</view>
			<view class="right">
				<view class="first">
					<view class="title">当月发电量</view>
					<view>
						<text class="integer">{{ monthPower || "--" }}</text>
						<text class="unit">KWh</text>
					</view>
				</view>
				<view class="second">
					<view class="title">累计发电量</view>
					<view>
						<text class="integer">{{ allPower || "--" }}</text>
						<text class="unit">KWh</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartData: {
					series: [{
						name: "",
						color: "#068eff",
						data: 0.0,
					}, ],
				},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['arcbar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: [
						"#1890FF",
						"#91CB74",
						"#FAC858",
						"#EE6666",
						"#73C0DE",
						"#3CA272",
						"#FC8452",
						"#9A60B4",
						"#ea7ccc",
					],
					padding: undefined,
					title: {
						name: "0%",
						fontSize: 20,
						color: "#000",
					},
					subtitle: {
						name: "",
						fontSize: 25,
						color: "#666666",
					},
					extra: {
						arcbar: {
							type: "circle",
							width: 8,
							backgroundColor: "#E9E9E9",
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2,
							radius: 40,
						},
					},
				},
			}
		},
		props: {
			allActivePower: {
				type: String,
				default: "--",
			},
			capacity: {
				type: String,
				default: "--",
			},
			dayPower: {
				type: String,
				default: "--",
			},
			monthPower: {
				type: String,
				default: "--",
			},
			yearPower: {
				type: String,
				default: "--",
			},
			allPower: {
				type: String,
				default: "--",
			},
		},
		mounted() {
			this.getChartData()
		},
		onReady() {},
		computed: {},
		methods: {
			getChartData() {
				this.chartData.series[0].data = (
					(this.allActivePower / 1000 / this.capacity).toFixed(1)
				)
				this.opts.title.name = (this.allActivePower / 10 / this.capacity).toFixed(1) + "%" || '--'
			},
		},
	}
</script>

<style lang="scss" scoped>
	.charts-box {
		width: 100%;
		height: 100%;
	}

	.right {
		margin-left: 50rpx;
		font-size: 28rpx;
	}

	.integer {
		font-size: 32rpx;
		font-weight: bold;
		color: #000;
	}

	.decimal {
		font-size: 24rpx;
	}

	.unit {
		font-size: 24rpx;
		margin-left: 10rpx;
	}

	.generate-power {
		// border: 1px solid;
		height: 100%;
		padding-top: 40rpx;

		.title {
			margin-bottom: 10rpx;
		}

		.top-item {
			display: flex;
			// border: 1px solid;
			justify-content: space-around;
			width: 80%;
			margin: 0 auto;
			height: 230rpx;

			.right {
				width: 50%;
				text-align: center;
				font-size: 28rpx;

				.first {
					margin-bottom: 40rpx;
					padding-top: 20rpx;
				}
			}

			.left {
				text-align: center;
				width: 50%;

				.first {
					padding-top: 20rpx;
				}
			}
		}

		.bottom-item {
			display: flex;
			width: 80%;
			justify-content: space-around;
			margin: 0 auto;
			font-size: 28rpx;
			margin-top: 80rpx;
			height: fit-content;

			.right {
				width: 50%;
				text-align: center;
			}

			.left {
				height: 100%;
				width: 50%;
				text-align: center;
			}

			.first {
				margin-bottom: 40rpx;
			}
		}
	}
</style>